<template>
  <div v-show="show">
    <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="course.course_img" alt="">
      <span><router-link :to="'/detail/'+course.id">{{ course.name }}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="course.expire_id" size="mini" placeholder="请选择购买有效期" class="my_el_select"
                 @change="change(course.expire_id)">
        <el-option :label="item.expire_text" :value="item.id"
                   v-for="(item, index) in course.expire_list" :key="index" >

        </el-option>
      </el-select>
    </div>
    <div class="cart_column column_4">¥{{ course.price }}</div>
    <div class="cart_column column_4"><button @click="delete_cart">删除</button></div>
  </div>
  </div>
</template>
<script>
export default {
  name: "CartItem",
  props: ['course'],
  watch: {
    'course.selected': function () {
      // 后台发起请求改变状态
      this.change_select();
    },

  },
  data() {
    return {
      checked: 0,
      expire: 0,
      show:true,
      all_price:0
    }
  },
  methods: {
    check_user_login() {
      let token = localStorage.token || sessionStorage.token;
      if (!token) {
        let self = this;
        this.$confirm("请先登录后再添加购物车", {
          callback() {
            self.$router.push("/login")
          },
        });
        return false
      }
      return token;
    },

    // 改变勾选
    change_select() {
      console.log(222)
      let token = this.check_user_login();
      this.$axios({
        url: this.$settings.HOST + "cart/option/",
        method: 'patch',
        headers: {
          // 必须请求头中携带token "jwt token值"
          "Authorization": "jwt " + token,
        },
        data: {
          selected:this.course.selected,
          course_id:this.course.id
        }
      })
      this.$emit('all')
      console.log(this.course.selected)
    },

    // 删除按钮功能
    delete_cart() {
      let token = this.check_user_login();
      this.$axios({
        url: this.$settings.HOST + "cart/option/",
        method: 'delete',
        headers: {
          // 必须请求头中携带token "jwt token值"
          "Authorization": "jwt " + token,
        },
        data: {
          course_id:this.course.id
        }
      }).then(res=>{
        console.log(res)
        // this.show=false
        this.$emit('alldel')
        this.$store.commit("delete_cart" )

      }).catch(error=>{
        console.log(error)
      })
    },
    //下拉框内容修改
    change(expire_id){

      for (let i = 0; i < this.course.expire_list.length; i++) {
        // if(this.course.expire_id===0){
        //   this.course.price=this.course.final_price
          // return false
        // }
        if (this.course.expire_id===this.course.expire_list[i].id){
          this.course.price=this.course.expire_list[i].price
        }
      }
      this.vali(expire_id)
      this.$emit('all')
    },
    //改变有效期
    vali(expire_id){
      console.log('修改有效期')
      let value=expire_id
      let token = this.check_user_login();
      this.$axios({
        url: this.$settings.HOST + "cart/option/",
        method: 'put',
        headers: {
          // 必须请求头中携带token "jwt token值"
          "Authorization": "jwt " + token,
        },
        data: {
          course_id:this.course.id,
          value:value
        }
      })
    }
  },
  created() {
    console.log(258963,this.course.expire_list);
    this.all_price=this.course.price
    this.$emit('all')
    console.log("xxxxxxx",this.course.price);
  }
}
</script>

<style scoped>
.cart_item::after {
  content: "";
  display: block;
  clear: both;
}

.cart_column {
  float: left;
  height: 250px;
}

.cart_item .column_1 {
  width: 88px;
  position: relative;
}

.my_el_checkbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}

.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}

.cart_item .column_2 img {
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}

.cart_item .column_3 {
  width: 197px;
  position: relative;
  padding-left: 10px;
}

.my_el_select {
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.cart_item .column_4 {
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}

</style>
